<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>

		<script>
			function myFunction() {
				var myCollection = document.getElementsByTagName("p");
				var i;
				for (i = 0; i < myCollection.length; i++)
				{
					myCollection[i].style.color = "red";
				}
			}
		</script>

	</head>
	<body>

		<h2>JavaScript HTML DOM</h2>
		<p>Hello World!</p>
		<p>Hello Runoob!</p>
		<p id="demo"></p>
		<p id="demo2"></p>

		<!--以下代码获取文档所有的 <p> 元素：-->
		<script>
			var myCollection = document.getElementsByTagName("p");
			document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myCollection[1].innerHTML + '</span>';
		</script>

		<!--HTMLCollection 对象 length 属性-->
		<script>
			var myCollection = document.getElementsByTagName("p");
			document.getElementById("demo2").innerHTML = "文档包含" + myCollection.length + " 个段落。";
		</script>

		<!--集合 length 属性常用于遍历集合中的元素-->
		<p>点击按钮修改 p 元素的背景颜色。</p>
		<button onclick="myFunction()">点我</button>

	</body>
</html>
